<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
	<div id="example-1">
		<button v-on:click="counter += 1">Add 1</button>
		 <p>The button above has been clicked {{ counter }} times.</p>
		 <button v-on:click="greet">Greet</button>
		 <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
	</div>
	
	
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
   var app = new Vue({
		 el: '#example-1',
		 data:{
		 name:'vue',
		 counter: 0,
		 },
		methods:{
			greet: function(event){
				alert('Hello ' + this.name + '!');
				if (event) {
					console.log(event)
				  }
			},
			warn: function(message,event){
				
				if (event) {
				  event.preventDefault();
				}
				alert(message);
			},
		}
   }); 
</script>
</html>